<template>
	<view class="" style="background: #F4F5F9;overflow: auto;">
		<view>
			<view class="logion">
				<view class="sss">
					<view class="bgc-imga1"></view>
					<view class="bgc-imga2"></view>
					<view class="logo">
						<image :src="info.headPortrait" style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill">
						</image>
						<view class="logola">
							<image src="../../static/images/myrz.png" class="cuo" mode="aspectFill"
								v-if="info.waitApprovedStatus=='EXAMINE' || info.waitApprovedStatus=='REFUSE'"></image>
							<image src="../../static/images/yrz.png" class="cuo" mode="aspectFill" v-else></image>
							<view class="shenhe">
								{{info.waitApprovedStatus=='EXAMINE' ? "审核中":info.waitApprovedStatus=='PASS'?"已认证":info.waitApprovedStatus=='REFUSE'?"已拒绝":''}}
							</view>
						</view>
					</view>
					<view class="names">
						<text v-if="info.nickName">{{info.nickName}}</text><text v-else>0</text>
					</view>
					<view class="loves">
						<view class="diving" @click="gotolike(1)">
							<view class="divtast">
								<text v-if="info.ilike">{{info.ilike}}</text><text v-else>0</text>
							</view>
							<view class="divingname">
								我喜欢的
							</view>
						</view>
						<view class="diving" style="margin: 0 136rpx;" @click="gotolike(2)">
							<view class="divtast" v-if="info.likeMe==0">
								<text v-if="info.likeMe">{{info.likeMe}}</text><text v-else>0</text>
							</view>
							<view class="vimg" v-else>
								<image :src="info.likeMeheadPortrait" class="simg" mode="aspectFill"></image>
							</view>
							<view class="divingname">
								喜欢我的
							</view>
						</view>
						<view class="diving" @click="gotolike(3)">
							<view class="divtast">
								<text v-if="info.lovers">{{info.lovers}}</text><text v-else>0</text>
							</view>
							<view class="divingname">
								互相喜欢
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="create_vlog_container">
				<view class="container" @click='goPage("/pagescommunity/newsRelease/newsRelease")'>
					立即发布
				</view>
				<view class="container">
					LPT性格测试
				</view>
			</view>
			<view class="box">
				<view class="boxsing">
					<image src="../../static/images/indexlable.png" style="width: 42rpx;height: 42rpx;margin-left: 42rpx;;"
						mode="aspectFill">
					</image>
					<view class="boxsname">
						完成以下任务即可获得7日优先推荐
					</view>
				</view>
				<view class="boxsing" style="height: 52rpx;" v-if="numtwo<2">
					<view class="boxsname" style="margin-left: 42rpx;">
						双重认证
					</view>
					<view class="boxsnames" style="width: 88rpx;margin-left: 0rpx;">
						（{{numtwo}}/2）
					</view>
					<view class="boxsnames" style="margin-left: 0rpx;">
						配对成功率提升200%
					</view>
					<view class="boxsbutton" @click="gotomation">
						立即认证
					</view>
				</view>
				<view class="boxsing" style="height: 52rpx;" v-if="info.completionRatio < 80">
					<view class="boxsname" style="margin-left: 42rpx;">
						个人资料
					</view>
					<view class="boxsnames">
						资料完善80%以上双倍曝光
					</view>
					<view class="boxsbutton" @click="improveInformation">
						立即完善
					</view>
				</view>
				<view class="" style="height: 52rpx;">
				</view>
			</view>
			
			<view class="box">
				<view class="boxsing">
					<image src="../../static/images/106.svg" style="width: 42rpx;height: 42rpx;margin-left: 42rpx;;"
						mode="aspectFill">
					</image>
					<view class="boxsname">
						我的动态
					</view>
				</view>
				<view class="my_vlog">
					<view class="vlog_item" v-for="item in vlogList.slice(0,3)">
						<image v-if="item.image" :src="item.image" mode="aspectFill"></image>
						<view v-else class="vlog_text"><text class="yc3">{{ item.content }}</text></view>
					</view>
				</view>
			</view>

			<view class="box" style="">
				<view class="box-bottom" v-for="(item,index) in button" :key="index" @click="whether(index)">
					<view class="box-bottom-left">
						<image :src="item.img" class="box-bottom-img" mode="aspectFill"></image>
						<view class="box-bottom-text">
							{{item.name}}
						</view>
						<view class="box-bottom-text-la" v-if="index == 0">
							{{info.goldBalance || '0个'}}
						</view>
					</view>
					<view class="box-bottom-right">
						<view class="box-bottom-right-name" v-if="index != 2">
							{{item.la}}
						</view>
						<view class="box-bottom-right-name" v-else="index != 2">
							<u-button open-type="share" :hairline="false" :customStyle="{
								'font-size': '28rpx',
								'font-family': 'PingFang SC-Regular, PingFang SC',
								'font-weight': '400',
								'color': '#B7B7B7',
								'border':'none',
								
							}">
								{{item.la}}
							</u-button>

						</view>

						<image src="../../static/right.png" class="box-bottom-right-img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		WS
	} from '@/util/wsConfig.js'
	import ELM from '../../components/elm-toast/index.vue';
	export default {
		components: {
			ELM
		},
		data() {
			return {
				flag: false,
				dataflag: true,
				img: this.$BASE_URL,
				bgColor: "rgba(255, 255, 255, 0)",
				button: [{
					name: "桃花币",
					num: 0,
					la: "立即充值",
					img: "../../static/images/mymoney.png",
				}, {
					name: "个人资料",
					num: '',
					la: "",
					img: "../../static/images/myren.png",
				}, {
					name: "推荐给好友",
					num: '',
					la: "免费获得桃花币",
					img: "../../static/images/myshare.png",
				}, {
					name: "设置",
					num: '',
					la: "",
					img: "../../static/images/myset.png",
				}],
				info: {
					userArticleViewResponse: {
						articleImg: null,
						articleContent: null
					}
				},
				numtwo: 0,
				ownerId: null,
				timeoutObj: null,
				reConnect: true,
				socketTask: null,
				vlogList: [
					{ id: 1, image: 'http://gips2.baidu.com/it/u=2293244731,760340970&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' },
					{ id: 5, image: '', content: '66我是发帖文字的呀呀呀呀我是发帖文字的呀呀呀呀我是发帖文字的呀呀呀呀我是发帖文字的呀呀呀呀' },
					{ id: 2, image: 'http://gips2.baidu.com/it/u=2293244731,760340970&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' },
					{ id: 3, image: 'http://gips2.baidu.com/it/u=2293244731,760340970&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' },
					{ id: 4, image: 'http://gips2.baidu.com/it/u=2293244731,760340970&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' },
				]
			};
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.ownerId = uni.getStorageSync('info') != null ? uni.getStorageSync('info').id : null;
			}
		},
		onHide() {
			this.reConnect = true;
			clearInterval(this.timeoutObj); //销毁定时器
		},
		methods: {
			goPage(path) {
				uni.navigateTo({
					url: path
				})
				return;
				if (uni.getStorageSync('info') != '') {
					uni.navigateTo({
						url: path
					})
				} else {
					this.isLoginPop = true
				}
			},
			gotomation() {
				uni.navigateTo({
					url: "/pagesme/me/doubleauth"
				})
			},
			gotolike(type) { //喜欢三个列表页面
				console.log("进来了")
			},
			whether(i) {
				if (i == 0) {} else if (i == 1) {
					this.improveInformation();
				} else if (i == 3) {
					uni.navigateTo({
						url: "/pagesme/set/set"
					})
				} else if (i == 2) {

				}
			},
			improveInformation() { //完善信息
				uni.navigateTo({
					url: "/pagesme/me/improveInformation"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.logion {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

	.twoTemp {
		&:after {
			width: calc(33% - 10rpx);
			content: '';
		}

		image {
			&:last-child {
				margin-left: 10rpx;
			}
		}
	}

	.imgs {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 42rpx;

		image {
			width: calc(33% - 10rpx);
			height: 198rpx;
			// border: 1rpx solid #707070;
			border-radius: 12rpx;
			// &:first-child{
			// 	border-bottom-left-radius: 12rpx;
			// 	border-top-left-radius:12rpx;
			// }
			// &:last-child{
			// 	border-bottom-right-radius: 12rpx;
			// 	border-top-right-radius:12rpx;
			// }
		}
	}

	.strs {
		padding: 30rpx 42rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.box-bottom-text-la {
		font-size: 36rpx;
		font-family: 'PingFang SC-Heavy, PingFang SC';
		font-weight: 400;
		color: #FF5678;
		line-height: 36rpx;
		margin-left: 20rpx;
	}

	.box-bottom-right-img {
		width: 11rpx;
		height: 20rpx;
		margin: 0 38rpx 0 14rpx;
	}

	.box-bottom-right-name {
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B7B7B7;
		line-height: 28rpx;
	}

	.box-bottom-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.box-bottom-text {
		font-size: 28rpx;
		font-family: 'PingFang SC-Heavy';
		font-weight: bolder;
		color: rgba(45, 49, 50, 0.9);
		line-height: 28rpx;
		margin-left: 24rpx;
	}

	.box-bottom-img {
		height: 36rpx;
		width: 36rpx;
		margin-left: 42rpx;
	}

	.box-bottom-left {
		display: flex;
		align-items: center;
	}

	.box-bottom {
		width: 100%;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 66rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.box-bottom:first-child {
		padding-top: 30rpx;
	}

	.box-bottom:last-child {
		padding-bottom: 40rpx;
	}

	.boxsbutton {
		width: 152rpx;
		height: 52rpx;
		background: #ffeef2;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #FF5678;
		line-height: 52rpx;
		margin-left: auto;
		border-radius: 33rpx;
		margin-right: 42rpx;
	}

	.boxsnames {
		height: 34rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		line-height: 34rpx;
		margin-left: 18rpx;
		color: rgba(45, 49, 50, 0.9);

	}

	.boxsname {
		height: 40rpx;
		font-size: 28rpx;
		font-family: 'PingFang SC-Heavy';
		font-weight: bolder;
		color: rgba(45, 49, 50, 0.9);
		line-height: 40rpx;
		margin-left: 14rpx;
	}

	.boxsing {
		display: flex;
		align-items: center;
		height: 42rpx;
		padding-top: 42rpx;
	}

	.box {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 32rpx auto;
		position: relative;
	}

	.divingname {
		width: 96rpx;
		height: 24rpx;
		font-size: 24rpx;
		font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
		font-weight: 400;
		color: #B1B4C5;
		line-height: 24rpx;
		margin-top: 30rpx;
	}

	.simg {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		filter: blur(4rpx);
		transform: translate3d(0, 0, 0);

	}

	.vimg {
		border: 5rpx solid #FF5678;
		width: 96rpx;
		height: 96rpx;
		margin-top: 30rpx;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.divtast {
		width: 96rpx;
		height: 96rpx;
		margin-top: 30rpx;
		display: flex;

		font-size: 40rpx;
		font-family: 'Arial-Regular, Arial';
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		justify-content: center;
		align-items: center;
	}

	.diving {
		width: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.loves {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		position: relative;
		// z-index: 10;
	}

	.sss {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0rpx;
		overflow: hidden;
		background: #fff;

		.bgc-imga1 {
			position: absolute;
			top: -250rpx;
			left: -250rpx;
			width: 750rpx;
			height: 750rpx;
			border-radius: 50%;
			background-color: #ffeef2;
			z-index: 0;
		}

		.bgc-imga2 {
			position: absolute;
			bottom: -100rpx;
			right: -100rpx;
			width: 375rpx;
			height: 375rpx;
			border-radius: 50%;
			background-color: #ffeef2;
			z-index: 0;
			opacity: 0.8;
		}
	}

	.names {
		width: 100%;
		text-align: center;
		height: 44rpx;
		font-size: 32rpx;
		// font-weight: bold;
		// font-family: 'PingFang SC-Bold, PingFang SC';
		font-family: 'Arial-Regular, Arial';
		font-weight: 600;
		color: #333333;
		line-height: 44rpx;
		margin-top: 28rpx;
	}

	.shenhe {
		height: 28rpx;
		font-size: 20rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #FF5678;
		margin-left: 8rpx;
		line-height: 28rpx;
	}

	.cuo {
		width: 20rpx;
		height: 20rpx;
	}

	.logo {
		width: 184rpx;
		height: 184rpx;
		border: 6rpx solid #FF5678;
		margin: 0 auto;
		border-radius: 50%;
		margin-top: 186rpx;
		position: relative;

		.logola {
			width: 126rpx;
			height: 36rpx;
			background: #ffeef2;
			border-radius: 23rpx;
			border: 2rpx solid #FF5678;
			position: absolute;
			left: 30rpx;
			bottom: -18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.texts {
		height: 50rpx;
		font-size: 32rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		// font-weight: bold;
		color: #000000;
		line-height: 50rpx;
		z-index: 1000;
	}

	.nobutton {
		width: 392rpx;
		height: 84rpx;
		background: #ffeef2;
		border-radius: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		margin: 0 auto;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #FF5678;
		margin-top: 40rpx;

	}

	.text {
		width: 100%;
		height: 44rpx;
		font-size: 32rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #C9C9D0;
		line-height: 44rpx;
		text-align: center;
		margin-top: 104rpx;
	}

	.noimg {
		width: 338rpx;
		height: 338rpx;
		margin: 0 auto;
		padding-top: 200rpx;
	}

	page {
		height: 100%;
		background: linear-gradient(180deg, #F4F5F9 0%, #F4F5F9 100%);
	}


	.bgc-img {
		position: absolute;
		top: -80rpx;
		left: 40rpx;
		width: 670rpx;
		pointer-events: none;
		height: 100%;
	}

	.create_vlog_container {
		display: flex;
		gap: 20px;
		width: 686rpx;
		margin: 32rpx auto;

		.container {
			flex: 1;
			height: 60px;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #FF5678;
		}
	}
	
	.my_vlog {
		display: flex;
		flex-wrap: nowrap;
		gap: 15rpx;
		padding: 30rpx 42rpx 42rpx 42rpx;
		justify-content: space-between;
		.vlog_item {
			flex: 1;
			height: 198rpx;
			border-radius: 12rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
			.vlog_text {
				width: calc(100% - 30rpx);
				height: calc(100% - 30rpx);
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				padding: 15rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333;
				border-radius: 12rpx;
				border: 1px solid #D81548;
			}
		}
	}
</style>